<template>
    <div class="wrap-box">
        <div class="bg">
            <timeCom></timeCom>
<!--            <weather></weather>-->
            <div class="main-box">
              <div class="left">
                <qhgk :qhData="allDataObj.numberStatus"></qhgk>
                <hcp :hcpData="allDataObj.evaluate"></hcp>
                <ywsl :ywData="allDataObj.business"></ywsl>
              </div>
              <div class="mid">
                <midTitle :global="allDataObj.global"></midTitle>
                <midMap :mapObj="allDataObj.map"></midMap>
                <zhsl :tableData="allDataObj.hanlderStatus"></zhsl>
              </div>
              <div class="right">
                <fwsx :fwData="allDataObj.serveMatter"></fwsx>
<!--                <ryjx :list="allDataObj.personalAssess"></ryjx>-->
                <ydfx :monthData="allDataObj.monthAnalyse"></ydfx>
                <jdbj :obj="allDataObj.streetHandler"></jdbj>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import timeCom from "./components/timeCom.vue";
import weather from "./components/weather.vue";
import qhgk from "./components/left/qhgk.vue";
import hcp from "./components/left/hcp.vue";
import ywsl from "./components/left/ywsl.vue";
import midTitle from "./components/mid/midTitle.vue";
import midMap from "./components/mid/midMap.vue";
import zhsl from "./components/mid/zhsl.vue";
import fwsx from "./components/right/fwsx.vue";
import ryjx from "./components/right/ryjx.vue";
import jdbj from "./components/right/jdbj.vue";
import ydfx from "./components/right/ydfx.vue";
import {getData} from "@/api"
export default {
    name: "home",
    data() {
        return {
            timer: null,
            allDataObj: {
                hanlderStatus: {
                    data: [],
                }
            }
        }
    },
    components: {
        timeCom, weather, qhgk, hcp, ywsl, midTitle, midMap, zhsl, fwsx, ryjx, jdbj, ydfx
    },
    created() {
        this.getData();
        this.timer = setInterval(() => {
            this.getData();
        }, 1000 * 10);  //每分钟获取一次数据
        // this.getData();
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
  methods: {
        getData(){
            getData().then(res => {
                let json = res.content[0].itemValue;
                this.allDataObj = JSON.parse(json);
                console.log("jsonToObject",this.allDataObj)
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.wrap-box {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background: rgba(15, 25, 46, 1);
    overflow: auto;
}

.bg {
    position: relative;
    width: 100%;
    height: 100%;
    background: url("~@/assets/home/bg.png") no-repeat;
    background-size: 100% 100%;
    padding-top: 118px;
    padding-bottom: 54px;
    display: flex;
    overflow: hidden;
    .main-box{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        overflow-y: auto;
        overflow-x: hidden;
    }
  .main-box::-webkit-scrollbar {
    display: none;
  }
    .left{
        margin-top: 2px;
        padding-left: 20px;
        width: 470px;
    }
    .mid{
        //display: flex;
        //flex-direction: column;
        flex: 1;
        margin: 0 23px 0 4px;
        padding-bottom: 28px;
    }
    .right{
        margin-top: 2px;
        padding-right: 20px;
        width: 470px;
    }
}
</style>
